import React from "react"
import './index.scss'

import { Toast } from 'antd-mobile';
import axios from "axios";
import { getCurrentCity } from "../../utils"//获取定位城市方法
import { List, AutoSizer } from 'react-virtualized';  //长列表组件
import NavHeader from "../../components/NavHeader";
//格式化城市数据列表
const formatCityList = list => {
    const cityList = {}

    list.forEach(item => {
        const first = item.short.substr(0, 1)  //通过substr截取每个城市字符串首字母
        // 判断对象中是否有这个key 我们可以利用对象取值的第二种方式 中括号的方式
        if (cityList[first]) {
            // 如果进入if 代表有这个值，我们只需要直接push进去
            cityList[first].push(item)
        } else {
            // 如果进入else 代表没有这个值，我们初始化这个属性，并且把当前数据设置进去
            cityList[first] = [item]
        }
    })
    // 接下来我们需要把 cityList里面所有的key取出来，放在数组中，充当城市列表右侧的首字母导航条
    const cityIndex = Object.keys(cityList).sort()
    return {
        cityList,
        cityIndex
    }
}
// 索引的高度
const TITLE_HEIGHT = 36
//每个城市的高度
const NAME_HEIGHT = 50

// 点击事件后判断有无城市的数据
const HOST_CITY = ['北京', '上海', '广州', '深圳']
//格式化字母大小写
const formatCity = letter => {
    switch (letter) {
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        default:
            return letter.toUpperCase()
    }

}
export default class CityList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            cityList: {},
            cityIndex: [],
            activeIndex: 0  //默认高亮
        }

        this.listComponent = React.createRef()  //在constructor中，调用React.createRef() 创建ref对象
    }

    async componentDidMount() {
        await this.getCityList()
        // 计算List组件高度
        this.listComponent.current.measureAllRows()

    }
    componentWillUnmount() {
        this.setState = () => false;   //解决刷新bug
    }
    //获取城市列表
    async getCityList() {
        const res = await axios.get('http://localhost:8080/area/city?level=1')
        const { cityList, cityIndex } = formatCityList(res.data.body)
        //获取热门城市
        const hotRes = await axios.get('http://localhost:8080/area/hot')
        // 将热门数据添加到 cityList
        cityList['hot'] = hotRes.data.body
        // 将热门数据添加到 cityIndex 
        cityIndex.unshift('hot')
        //获取当前定位城市
        const curCity = await getCurrentCity()
        cityList['#'] = [curCity]
        cityIndex.unshift('#')

        this.setState({
            cityList,
            cityIndex
        })
    }

    //切换城市事件
    changeCity({ label, value }) {
        if (HOST_CITY.indexOf(label) !== -1) {
            localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))

            this.props.history.go(-1)

        } else {
            Toast.info('当前城市暂无房源！', 1, null, false);
        }

    }

    // List渲染每一行的方法
    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling,// 当前项是否正在滚动中
        isVisible, // 当前项在List中是可见的
        style   // 重点属性：一定要给每一个行数添加该样式
    }) => {

        const letter = this.state.cityIndex[index]
        const citys = this.state.cityList[letter]
        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatCity(letter)}</div>
                {citys.map(item => {
                    return (
                        <div className="name" key={item.value} onClick={() => { this.changeCity(item) }}>
                            {item.label}
                        </div>
                    )
                })}
            </div>
        )
    }
    // 动态计算高度
    getRowHeight = ({ index }) => {
        // 数量* 索引的高度+ 每个城市的高度 
        let { cityIndex, cityList } = this.state;
        return cityList[cityIndex[index]].length * NAME_HEIGHT + TITLE_HEIGHT;
    }
    //封装右侧高亮效果方法
    renderCityIndex() {
        const { cityIndex, activeIndex } = this.state
        return cityIndex.map((item, index) => {
            return (
                <li className="city-index-item" key={item} onClick={() => {
                    // 拿到List组件的实例
                    this.listComponent.current.scrollToRow(index)
                }}>
                    {/*判断一下，如果高亮状态的索引等于当前索引，那么就设置高亮样式*/}
                    <span className={activeIndex === index ? 'index-active' : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
                </li>
            )
        })
    }
    // 右侧滚动高亮效果
    rowRendered = ({ startIndex }) => {
        if (this.state.activeIndex !== startIndex) {
            this.setState({ activeIndex: startIndex })
        }
    }

    render() {
        return (
            <div className="citylist">
                {/* 导航栏 */}
                <NavHeader>城市选择</NavHeader>
                {/* 渲染list城市列表 */}
                <AutoSizer>
                    {({ height, width }) => (
                        <List
                            ref={this.listComponent}
                            height={height}
                            width={width}
                            rowCount={this.state.cityIndex.length}
                            rowHeight={this.getRowHeight}
                            rowRenderer={this.rowRenderer}
                            onRowsRendered={this.rowRendered}
                            scrollToAlignment='start'
                        />
                    )}
                </AutoSizer>
                {/* 右侧索引列表 */}
                <ul className="city-index">
                    {this.renderCityIndex()}
                </ul>

            </div >
        )
    }
}